// all display nodes for transmitting between panels and homepage

import { homeAPI, DisplayQueue, DisplayQueueMember } from './hp_data.js';
import { vns_method_to_btn_name } from './anicard.js';

const _CARD_DISPLAY_NODES = [];

export const init_card_display = function (card_display_node = new HTMLElement(), search_text = "") {
    create_display(homeAPI([search_text], true), [], card_display_node);
    $(card_display_node).animate({scrollTop: 1}, 1);
}

export const VNS_click_callback = function (btn, btn_queue) {
    const CARD_DISPLAY_NODE = document.querySelector("#card-display-ex");
    const AIM__DISPLAY_ID = btn.getAttribute("href");
    let page_position = 0;

    // if(!btn.classList.contains("focus")) {
    //     document.querySelectorAll(".scrollSpy-btn.focus").forEach(btn => btn.classList.remove("focus"));
    //     btn.classList.add("focus");
    // }

    if(document.querySelector(AIM__DISPLAY_ID)) {
        page_position = document.querySelector(AIM__DISPLAY_ID).offsetTop;
        $(CARD_DISPLAY_NODE).animate({scrollTop: page_position}, "normal");
    }
}

export const VNS_scroll_callback = function (panel_node) {
    const CARD_DISPLAY_NODE = document.querySelector("#card-display-ex");
    // console.log(CARD_DISPLAY_NODE);
    // $(CARD_DISPLAY_NODE).animate({scrollTop: 1}, 1);

    // listen to card display scrolling event
    // CARD_DISPLAY_NODE.onscroll = () => {
    //     let this_id = "";
    //     let this_display_node;
    //     panel_node.childNodes.forEach((node, i, nodeList) => {
    //         this_id = node.getAttribute("href");
    //         this_display_node = document.querySelector(this_id);

    //         if(node.classList.contains("disabled")) {
    //             return ;
    //         }
            
    //         let diff = this_display_node.querySelector(".display-reminder").offsetTop - parseInt(CARD_DISPLAY_NODE.scrollTop);
    //         // console.log(diff);
    //         if(diff >= -10 && diff <= 10 && !node.classList.contains("active")) { 
    //             node.classList.add("active");
    //             // console.log(this_id, diff);
    //         }  else if(node.classList.contains("active") && diff < -10 || diff > 10) { 
    //             node.classList.remove("active"); 
    //         }
    //     })
    // }
    CARD_DISPLAY_NODE.onscroll = () => {
        // if(document.querySelectorAll(".display-reminder.active-sticky").length === 0) {
        //     panel_node.querySelector(".sidebar-btn:not(.disabled):first-child").classList.add("active");
        //     return ;
        // }

        let scrollBar_top = CARD_DISPLAY_NODE.scrollTop;
        panel_node.querySelectorAll(".sidebar-btn:not(.disabled)").forEach((btn_node, i, btnList) => {
            console.log(btn_node)
            let display_id = btn_node.getAttribute("id");
            console.log(display_id)
            let display_node = document.querySelector(display_id);
            let display_top = display_node.getBoundingClientRect().top;
            let display_bottom = display_node.getBoundingClientRect().bottom;
            if(scrollBar_top >= display_top && scrollBar_top < display_bottom) {
                if(!btn_node.classList.contains("active")) {
                    btn_node.classList.add("active");
                }
            } else if(btn_node.classList.contains("active")) {
                btn_node.classList.remove("active");
            }
        });
    }
}

const EL_KW_LIST = [];
export const EL_callback = function (btn, btn_queue) {
    const CARD_DISPLAY_NODE = document.querySelector("#card-display-ex");

    let btn_kw_str = btn.querySelector(".filter-btn-text").innerText;
    if(btn.classList.contains("active")) {
        btn.classList.remove("active");
        console.log(`EL button\: \"${btn_kw_str}\" was filtered out.`);
        EL_KW_LIST.push(btn_kw_str);
    } else {
        btn.classList.add("active");
        console.log(`EL button\: \"${btn_kw_str}\" was reactivated.`);
        EL_KW_LIST.splice(EL_KW_LIST.indexOf(btn_kw_str), 1);
    }

    create_display(homeAPI(EL_KW_LIST, false, true), _CARD_DISPLAY_NODES, CARD_DISPLAY_NODE);
    $(CARD_DISPLAY_NODE).animate({scrollTop: 1}, 1);
}

// create display
const create_display = function (display_queue = new DisplayQueue("new display set"), display_node_list = [], card_display_node = new HTMLElement()) {
    display_node_list.length = 0;
    card_display_node.innerHTML = "";
    let VNS_tag = display_queue.get_next_tag("head") || "tag";
    let display_member;
    let card_display_single_node;
    while (VNS_tag !== "") {
        display_member = display_queue._queue[VNS_tag][0];
        if(display_queue._queue[VNS_tag][1] > 0 && VNS_tag !== "head") {
            card_display_single_node = create_single_display(display_member);
            display_node_list.push(card_display_single_node);
            if(document.querySelector(".scrollSpy-btn." + VNS_tag)) {
                document.querySelector(".scrollSpy-btn." + VNS_tag).classList.remove("disabled");
            }

            // append single display node to DOM
            card_display_node.appendChild(card_display_single_node);
        } else if(document.querySelector(".scrollSpy-btn." + VNS_tag)) {
            document.querySelector(".scrollSpy-btn." + VNS_tag).classList.add("disabled");
            document.querySelector(".scrollSpy-btn." + VNS_tag).classList.remove("active");
        }

        VNS_tag = display_member.get_next_tag();
    }
}

const create_single_display = function (display_member = new DisplayQueueMember()) {

    let VNS_tag = display_member.get_VNS_tag();
    let card_display_single_node = document.createElement("div");
    let card_deck_node = document.createElement("div");
    card_display_single_node.classList.add(VNS_tag);
    card_display_single_node.setAttribute("id", VNS_tag);
    card_deck_node.classList.add("row", "row-cols-1", "row-cols-sm-2", "row-cols-lg-3", "card-deck");
    card_display_single_node.appendChild(card_deck_node);

    // append card nodes to the deck node
    create_cards(display_member, card_deck_node);

    display_member.appendTo(card_display_single_node, card_deck_node, vns_method_to_btn_name);
    return card_display_single_node;
}

const create_cards = function (display_member = new DisplayQueueMember(), card_deck_node = new HTMLElement()) {
    let card_subject_list = display_member._get_card_subject_list();
    card_subject_list.forEach((card_subject, i, subList) => {
        card_subject.appendTo(card_deck_node);
    });
}